<template>
  <div>
    <div>
      <el-menu class="el-menu-demo" mode="horizontal" router>
        <el-menu-item  @click="logout1" v-if="name !=''">欢迎 <span style="margin-left:20px;">{{name}}</span></el-menu-item>
        <el-menu-item  @click="logout" v-if="name ==''">登录 <span style="margin-left:20px;"></span></el-menu-item>
        <el-menu-item index="2">我的订单</el-menu-item>
        <el-menu-item index="3">我的收藏</el-menu-item>
        <el-menu-item index="/cart">购物车</el-menu-item>
      </el-menu>
    </div>
    <el-dialog title="登录" :visible.sync="dialogVisible" width="40%" >
      <span>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="userName">
            <el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password"></el-input>
          </el-form-item>
                  <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
        </el-form-item>
        </el-form>

      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: "",
  // 组件注册
  components: {},
  // 父组件传参
  props: {},
  // 变量声明
  data() {
    return {
        dialogVisible:false,
      ruleForm: {
        userName: "jiyun",
        password: "password",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" },
        ],
      },
    };
  },
  // Vue实例创建完成以后执行 数据可用
  created() {},
  // Vue模板挂载完毕以后执行  DOM节点加载完毕了（可以获取节点了）
  mounted() {},
  // keepalive 缓存进入执行
  activited() {},
  // vue组件更新完毕以后执行
  update() {},
  // 定义事件
  methods: {
    logout() {
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
        //   alert("submit!");
        const   res  = await this.$axios.post("api/users/login",this.ruleForm)
       
        let { data } = res 
        // console.log(data)
        sessionStorage.setItem("token",data.user.user_id)
        this.$store.commit("add",data.user.userName)
        this.$message.success("登录成功")
        this.dialogVisible = false
 

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
     logout1() {
        this.$confirm('确定要退出, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.clear("token")
          this.$store.commit("dl")
          this.$router.go(0)
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });          
        });
      }
  },
  // 过滤器
  filter: {},
  // 计算属性
  computed: {
      ...mapGetters(["name"])
  },
  // 监听属性
  watch: {},
};
</script>

<style scoped>
.el-menu {
  background-color: #b3c0d1;
  float: right;
  margin-right: 200px;
}
.el-dialog{
    text-align: center;
}
</style>
